<template>
  <div class="research" v-if="this.$store.state.search.rankData != ''">
    <!-- 搜索页面头部 -->
    <div class="header">
      <router-link to="/home"
        ><i class="iconfont icon-fanhui1"></i
      ></router-link>
      <input type="text" placeholder="大家都在搜 张杰" autofocus />
    </div>

    <!-- 搜索页面榜单 -->
    <ul class="rankName">
      <li
        :class="{ active: i == index }"
        v-for="(v, i) in getRankName"
        :key="i"
        @click="fun(v.components), funb(i)"
      >
        {{ v.rankName }}
      </li>
    </ul>
    <component :is="com"></component>

    <!-- 搜索页面音乐分区 -->
    <MusicZone />

    <!-- 搜索页面推荐活动 -->
    <Active />
  </div>
</template>

<script>
import Hotrank from "@/components/xpf/home/search/rankcpt/hotrank.vue";
import Videorank from "@/components/xpf/home/search/rankcpt/videorank.vue";
import BoKerank from "@/components/xpf/home/search/rankcpt/boKerank.vue";
import MusicZone from "@/components/xpf/home/search/musicZone.vue";
import Active from "@/components/xpf/home/search/active.vue";

export default {
  components: {
    Hotrank,
    Videorank,
    BoKerank,
    MusicZone,
    Active,
  },
  data() {
    return {
      com: "Hotrank",
      index: "",
    };
  },
  methods: {
    fun(zujian) {
      this.com = zujian;
    },
    funb(i) {
      this.index = i;
    },
  },
  mounted() {
    this.$store.dispatch("getRankData");
  },
  computed: {
    getRankName() {
      return this.$store.state.search.rankData;
    },
  },
};
</script>

<style scoped>
.research {
  background: #f5f5f5;
  margin-top: 1rem;
}

.header {
  width: 100%;
  height: 1rem;
  background-color: #f5f5f5;
  padding: 0.34rem 0.34rem 0.11rem 0.34rem;
  position: fixed;
  top: 0;
}

.header .icon-fanhui1 {
  font-size: 0.38rem;
  line-height: 0.55rem;
  margin-right: 0.38rem;
  vertical-align: middle;
}

.header input {
  width: 5.84rem;
  height: 0.55rem;
  font-size: 0.32rem;
  line-height: 0.55rem;
  vertical-align: middle;
  border: none;
  border-bottom: 1px solid #000;
  caret-color: red;
  background-color: transparent;
}

.rankName {
  width: 100%;
  height: 0.88rem;
  /* background: skyblue; */
  padding: 0 0.34rem;
}

.rankName > li {
  float: left;
  height: 100%;
  font-size: 0.26rem;
  color: #676767;
  line-height: 0.88rem;
  /* background-color: orange; */
  margin-right: 0.55rem;
}

.rankName .active {
  color: #000;
  font-weight: bold;
}
</style>
